<template>
  <div class="login-container">
    <el-dialog
      title="授权"
      :visible.sync="$store.state.user.AuthorizationOpen"
      width="800px"
      height="800px"
      :before-close="handleClose"
    >
      <!-- 授权上传文件 -->
      <License ref="Authorization" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOpen">取 消</el-button>
        <!-- <el-button @click="onSubmit()" type="primary">上 传</el-button> -->
        <el-button type="primary" @click="closeOpen">确 定</el-button>
      </span>
    </el-dialog>
    <div class="login-content">
      <img src="../../assets/images/logo.png" alt="Logo" class="logo" />
      <div class="login">
        <!--          <div class="wel_come">-->
        <!--            <span style="text-align: center">教育培训系统</span>-->
        <!--          </div>-->
        <div class="title">教育培训系统</div>
        <div class="titleLine"></div>

        <el-form
          class="loginForm"
          v-show="active == 1"
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          autocomplete="on"
          label-position="left"
        >
          <el-form-item prop="account">
            <el-input
              ref="account"
              v-model="loginForm.account"
              :placeholder="$t('login.username')"
              name="account"
              type="text"
              tabindex="1"
              autocomplete="on"
              prefix-icon="el-icon-user"
              size="large"
              @change="getConfig"
            ></el-input>
          </el-form-item>
          <el-tooltip
            v-model="capsTooltip"
            :content="$t('login.upper')"
            placement="right"
            manual
          >
            <el-form-item prop="password">
              <el-input
                ref="password"
                v-model="loginForm.password"
                show-password
                :placeholder="$t('login.password')"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                prefix-icon="el-icon-lock"
                size="large"
              ></el-input>
            </el-form-item>
          </el-tooltip>
          <el-form-item prop="code" v-if="needCode">
            <el-row type="flex" justify="space-between">
              <el-col class="sms-input">
                <el-input
                  v-model="loginForm.code"
                  :placeholder="$t('login.codeTip')"
                  name="code"
                  autocomplete="on"
                  prefix-icon="el-icon-key"
                  size="large"
                ></el-input>
              </el-col>
              <el-col class="sms-right code-right">
                <el-tooltip
                  :content="$t('login.changeCode')"
                  placement="bottom"
                >
                  <img
                    id="imgcode"
                    :alt="$t('login.changeCode')"
                    :src="define.comUrl + imgUrl"
                    @click="changeImg"
                  />
                </el-tooltip>
              </el-col>
            </el-row>
          </el-form-item>
          <!--            <el-button type="text" class="jsbos-table-delBtn" @click="">忘记密码</el-button>-->
          <div class="login12">
            <el-checkbox v-model="checked" class="login-checked"
              >自动登录</el-checkbox
            >
            <div class="login-checked2" @click="gotoRest">忘记密码</div>
            <el-button
              :loading="loading"
              type="primary"
              class="login-btn"
              size="large"
              @click.native.prevent="handleLogin"
              >{{ $t("login.logIn") }}
            </el-button>
            <!--              <div style="display: flex;justify-content: flex-start;margin-top: 20px">-->
            <!--              </div>-->
          </div>
        </el-form>
      </div>
    </div>
    <RegisterForm v-if="registerFormVisible" ref="registerForm" />
    <el-dialog title="提示" :visible.sync="showTest" width="480px">
      <div class="tip">
        <div class="header">
          <div class="dia-txt">
            <div>忘记密码</div>
            <div>请至血吸虫病教育培训系统移动端进行修改。</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showTest = false">关闭</el-button>
      </span>
    </el-dialog>
    <img src="../../assets/images/loginBg2.png" style="position: absolute; bottom: 64px; left: 0; z-index: 10000;" />    
  </div>
</template>

<script>
import { getConfig, getQyhConfig, getInfo, getSystemAddress } from "@/api/user";
import { getSystemBaseConfig } from "@/api/system/sysConfig.js";
import { getMessageInfo } from "@/api/system/message.js";
import License from "./components/license.vue";
import RegisterForm from "./RegisterForm.vue";
import request from "@/utils/request";
import define from "@/utils/define";
import { setToken } from "@/utils/auth";
import { resetRouter } from "@/router";
export default {
  name: "Login",
  components: {
    License,
    RegisterForm,
  },
  data() {
    return {
      showTest: false,
      registerFormVisible: false,
      imageUrl: require("@/assets/images/default_avatar.png"),
      ifScanCode: 0,
      loginForm: {
        account: "",
        password: "",
        code: "",
        origin: "password",
      },
      loginRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.accountTip"),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.passwordTip"),
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.codeTip"),
          },
        ],
      },
      imgUrl: "",
      timestamp: "",
      capsTooltip: false,
      loading: false,
      showDialog: false,
      needCode: false,
      codeLength: 4,
      redirect: undefined,
      showTxt: false,
      otherQuery: {},
      active: 1,
      QYHConfig: {},
      systemBaseConfig: {},
    };
  },
  layoutType: {
    get() {
      return this.$store.state.settings.layoutType;
    },
    set(val) {
      UpdateTheme({ theme: val }).then((res) => {});
      this.$store.dispatch("settings/changeSetting", {
        key: "layoutType",
        value: val,
      });
    },
  },
  computed: {
    sysConfig() {
      return this.$store.state.settings.sysConfig;
    },
    loginLoading() {
      return this.$store.state.user.loginLoading;
    },
  },
  watch: {
    loginLoading(val) {
      if (!val) this.loading = false;
    },
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true,
    },
  },

  created() {
    // localStorage.removeItem("msg_id");
    if (this.getUrlParam("msg_id")) {
      localStorage.setItem("msg_id", this.getUrlParam("msg_id"));
    }
    //单点登录
    var token = this.$route.query.token;
    if (token) {
      var applicationId = this.$route.query.applicationId;
      token = decodeURIComponent(token);
      this.$store.commit("user/SET_TOKEN", token);
      setToken(token);
      if (applicationId == "586907411135073797") {
        this.gotoadmin();
      } else {
        this.gotoXuexi();
      }
      // getInfo({
      //   applicationId:
      //     typeof this.$route.query.applicationId == "string"
      //       ? this.$route.query.applicationId
      //       : this.$route.query.applicationId[0],
      // }).then((res) => {
      //   this.loading = false;
      //   let urlOne =
      //     res.data.menuList[0].children &&
      //       !res.data.menuList[0].urlAddress
      //       ? res.data.menuList[0].children[0].urlAddress
      //       : res.data.menuList[0].urlAddress;
      //   if (localStorage.getItem("msg_id")) {
      //     getMessageInfo(localStorage.getItem("msg_id")).then((res) => {
      //       localStorage.removeItem("msg_id");
      //       this.jumpMsgUrl(res);
      //     });
      //   } else {
      //     const applicationId=this.$route.query.applicationId
      //     if (applicationId === '444155096561877957') {
      //       this.gotoadmin()
      //     }else{
      //       this.$router.push({
      //         path:
      //           this.redirect && this.redirect != "/"
      //             ? this.redirect
      //             : urlOne,
      //         query: {
      //           applicationId: !applicationId || applicationId === 'all'?res.data.menuList[0].parentId:applicationId,
      //         },
      //       });
      //     }
      //   }
      // });
      // 业务逻辑
    }

    this.getSystemBaseConfigFn();
    // 判断是否微信浏览器打开
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf("micromessenger") !== -1;
    if (isWeixin) {
      const code = localStorage.getItem("loginCode");
      if (code) {
        this.qywxLoginByCode(code);
      } else {
        this.getCode();
      }
    }
    const _this = this;
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
        _this.handleLogin();
      }
    };
    if (this.needCode) this.changeImg();
  },
  mounted() {
    this.qyhCorpId = this.$route.query.qyhCorpId;

    this.$store.commit("user/SET_LOGIN_LOADING", false);
    this.setShowTxt();
    window.onresize = () => {
      this.setShowTxt();
    };
  },
  destroyed() {
    document.onkeydown = function (e) {
      const { keyCode } = e;
      if (keyCode === 13) {
      }
    };
  },
  methods: {
    gotoRest() {
      console.log(1111);
      this.showTest = true;
    },
    gotoadmin() {
      this.clickDown(
        {
          id: "444155096561877957",
          parentId: "-1",
          fullName: "管理后台",
          icon: "icon-ym icon-ym-sysMonitor",
          type: 0,
          urlAddress: "portal/WorkSpace",
          linkTarget: "_self",
          category: "Web",
          description: "",
          sortCode: 99,
          enCode: "SystemManager",
          propertyJson:
            '{"moduleId":"","iconBackgroundColor":"","isTree":0,"systemCategory":"业务应用"}',
          enabledMark: 0,
        },
        () => {
          this.layoutType = "blend";
          this.slideClass = "lightWhite";
        }
      );
    },
    gotoXuexi() {
      this.clickDown(
        {
          id: "586907411135073797",
          parentId: "-1",
          fullName: "学习平台",
          icon: "icon-ym icon-ym-sysMonitor",
          type: 0,
          urlAddress: "home",
          linkTarget: "_self",
          category: "Web",
          description: "",
          sortCode: 0,
          enCode: "LearningPlatform",
          propertyJson:
            '{"moduleId":"","moduleIdList":[],"iconBackgroundColor":"","systemCategory":"业务应用","isTree":0}',
          enabledMark: 0,
        },
        () => {
          this.layoutType = "functional";
          this.slideClass = "lanWhite";
        }
      );
    },
    async clickDown(v, fun) {
      // if (v.id == this.$route.query.applicationId) {
      //   return;
      // }

      if (v.linkTarget == "_blank") {
        window.open(v.urlAddress);
        return;
      }

      // 改变页面参数

      //  console.log(v)
      //清楚导航菜单,不用自带方法 需要彻底删掉

      this.$store.dispatch("tagsView/closeAll");

      //this.$store.state.visitedViews = [];

      resetRouter();
      //重新获取系统菜单
      const res = await this.$store.dispatch("user/getInfo", v.id);
      const accessRoutes = await this.$store.dispatch(
        "permission/generateRoutes",
        res
      );
      //修改首页路由
      //跳转重定向为 设置首页

      if (v.urlAddress && v.linkTarget == "_self") {
        accessRoutes[0].redirect = "/" + v.urlAddress;
      }
      //console.log("accessRoutes=====>", accessRoutes);
      await this.$router.addRoutes(accessRoutes);

      // dynamically add accessible routes
      this.$router.replace({
        path: "/",
        query: { applicationId: v.id },
      });
      if (fun) {
        fun();
      }
    },
    handleCasLogin() {
      window.location.href = define.APIURl + "/api/cas/casLogin/pc/all";
    },
    getSystemBaseConfigFn() {
      getSystemBaseConfig().then((res) => {
        this.systemBaseConfig = res.data;
      });
    },
    //控制可见性和异步初始化子组件
    shouRegisterForm(id, isDetail) {
      this.registerFormVisible = true;
      this.$nextTick(() => {
        this.$refs.registerForm.init(id, isDetail);
      });
    },
    setShowTxt() {
      if (document.documentElement.clientHeight <= 840) {
        this.showTxt = false;
      } else {
        this.showTxt = true;
      }
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    getConfig(val) {
      if (!val) return;
      getConfig(this.loginForm.account).then((res) => {
        this.needCode = !!res.data.enableVerificationCode;
        if (this.needCode) {
          this.codeLength = res.data.verificationCodeNumber || 4;
          this.changeImg();
        }
      });
    },
    handleLogin() {
      if (this.loading) return;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store.commit("user/SET_LOGIN_LOADING", true);
          const query = {
            ...this.loginForm,
            timestamp: this.timestamp,
          };
          console.log(this.$route.query, "this.$route.query");
          this.$store
            .dispatch("user/login", query)
            .then((res) => {
              getInfo({
                applicationId:
                  typeof this.$route.query.applicationId == "string"
                    ? this.$route.query.applicationId
                    : this.$route.query.applicationId[0],
              }).then((res) => {
                this.loading = false;
                let urlOne =
                  res.data.menuList[0].children &&
                  !res.data.menuList[0].urlAddress
                    ? res.data.menuList[0].children[0].urlAddress
                    : res.data.menuList[0].urlAddress;
                console.log(urlOne, "++++++++");
                if (localStorage.getItem("msg_id")) {
                  getMessageInfo(localStorage.getItem("msg_id")).then((res) => {
                    localStorage.removeItem("msg_id");
                    this.jumpMsgUrl(res);
                  });
                } else {
                  this.$router.push({
                    path:
                      this.redirect && this.redirect != "/"
                        ? this.redirect
                        : urlOne,
                    query: {
                      applicationId: res.data.menuList[0].parentId,
                    },
                  });
                }
              });
            })
            .catch(() => {
              this.loading = false;
              this.$store.commit("user/SET_LOGIN_LOADING", false);
            });
        } else {
          return false;
        }
      });
    },
    async jumpMsgUrl(res) {
      let urlPC = JSON.parse(res.data.customKey).pcUrl;
      urlPC = urlPC.substring(2, urlPC.length);
      this.$store.dispatch("tagsView/closeAll");
      const aaa = await this.$store.dispatch(
        "user/getInfo",
        urlPC.split("=")[1]
      );
      const accessRoutes = await this.$store.dispatch(
        "permission/generateRoutes",
        aaa
      );
      // setTimeout(function () {
      accessRoutes[0].redirect = urlPC;
      this.$router.addRoutes(accessRoutes);
      this.$router.replace({
        path: urlPC,
        // query: { applicationId: urlPC.split("=")[1] },
      });
    },
    changeImg() {
      let timestamp = Math.random();
      this.timestamp = timestamp;
      this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`;
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    qywxLoginByCode(code) {
      const _stateArr = this.getStateAll();
      // const _stateArr = JSON.parse(localStorage.getItem("_stateArr"));
      let _qyhCorpId = _stateArr.corpId;
      let _qyhAgentId = _stateArr.agentId;
      localStorage.setItem("_qyhCorpId", _qyhCorpId);
      localStorage.setItem("_qyhAgentId", _qyhAgentId);
      this.loading = true;
      this.$store.commit("user/SET_LOGIN_LOADING", true);
      this.qyhCorpId = _qyhCorpId;
      const paramCode = {
        code: code,
        qyhCorpId: _qyhCorpId,
        qyhAgentId: _qyhAgentId,
      };
      this.$store
        .dispatch("user/loginByWeCom", paramCode)
        .then((res) => {
          localStorage.removeItem("loginCode");
          localStorage.removeItem("_stateArr");
          this.loading = false;
          if (localStorage.getItem("msg_id")) {
            getMessageInfo(localStorage.getItem("msg_id")).then((res) => {
              localStorage.removeItem("msg_id");
              this.jumpMsgUrl(res);
            });
          } else {
            this.$router.push({
              path: this.redirect || "/",
              query: this.otherQuery,
            });
          }
        })
        .catch(() => {
          this.loading = false;
          this.$store.commit("user/SET_LOGIN_LOADING", false);
        });
    },
    getCode() {
      // 获取路径参数
      const query = this.$route.query;
      let _qyhCorpId = "";
      let _qyhAgentId = "";
      if (query.qyhCorpId) {
        _qyhCorpId = query.qyhCorpId;
      } else if (localStorage.getItem("_qyhCorpId")) {
        _qyhCorpId = localStorage.getItem("_qyhCorpId");
      }
      if (query.qyhAgentId) {
        _qyhAgentId = query.qyhAgentId;
      } else if (localStorage.getItem("_qyhAgentId")) {
        _qyhAgentId = localStorage.getItem("_qyhAgentId");
      }
      let redirect_uri = "";
      this.qyhCorpId = _qyhCorpId;
      console.log(_qyhCorpId, _qyhAgentId, "_qyhCorpId && _qyhAgentId");
      if (_qyhCorpId && _qyhAgentId) {
        let state = _qyhCorpId + "_" + _qyhAgentId;
        getSystemAddress("pc").then((res) => {
          console.log(res, "redirect_uri");
          redirect_uri = encodeURIComponent(res.msg);
          const url = "https://open.weixin.qq.com/connect/oauth2/authorize";
          const wx_url = `${url}?appid=${_qyhCorpId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_privateinfo&state=${state}&agentid=${_qyhAgentId}#wechat_redirect`;
          window.location.replace(wx_url);
        });
      } else {
        this.$message.warning("缺少自动登录必要参数，请手动或扫码登录。");
      }
    },
    //获取地址栏url后的参数值
    getQyhConfigHandler() {
      // 获取的url动态
      getQyhConfig()
        .then((res) => {
          this.QYHConfig = res.data;
        })
        .catch((err) => console.log(err));
    },
    getUrlParam(key) {
      var href = window.location.href;
      console.log(href, "window.location.href");
      console.log(key, "key");
      var url = href.split("?");
      if (url.length <= 1) {
        return "";
      }
      var params = url[1].split("&");

      for (var i = 0; i < params.length; i++) {
        var param = params[i].split("=");
        if (key == param[0]) {
          console.log(param[1], "param[1]");
          return param[1];
        }
      }
    },
    loadWeComQrImage() {
      getQyhConfig()
        .then((res) => {
          this.QYHConfig = res.data[0];
          new WwLogin({
            id: "qr_login",
            appid: this.QYHConfig.qyhCorpId,
            agentid: this.QYHConfig.qyhAgentId,
            redirect_uri: encodeURIComponent(this.QYHConfig.qyhComputerUrl),
            state: "hellowecom",
            href: "",
            lang: "zh",
          });
        })
        .catch((err) => console.log(err));
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // done();
          this.$store.commit("user/SET_AUTHORIZATIONOPEN", false);
        })
        .catch((_) => {});
    },
    /**解析企业微信扫码或自动登录回调地址携带state参数 */
    getStateAll() {
      const _state = this.getUrlParam("state"); // wwc0366cea7d993696_1000034 或 wwc0366cea7d993696_1000034#/login
      console.log("statestatestate", _state);
      const _stateArr = _state.split("#")[0].split("_");
      return {
        corpId: _stateArr[0],
        agentId: _stateArr[1],
      };
    },
    closeOpen() {
      this.$store.commit("user/SET_AUTHORIZATIONOPEN", false);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  background-color: #f6f8fc;
  border-radius: 4px;
}

::v-deep .el-checkbox__label {
  font-weight: 500;
  font-size: 12px;
  color: #a4afca;
  line-height: 16px;
  text-align: left;
  font-style: normal;
}

@import "./index.scss";

.login12 {
  width: 100%;
  position: relative;
  height: 418px;

  .login-checked2 {
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 500;
    font-size: 12px;
    color: #a4afca;
    line-height: 16px;
    text-align: center;
    font-style: normal;
  }

  .login-btn {
    text-align: center;
    margin: 40px 0 0 0;
    width: 100%;
  }
}

.login-container {
  position: relative;
  // background-image: url("../../assets/images/beijing.png");
  background-image: url("../../assets/images/loginBg.png");
  // background-size: 100% 100%;
  background-size: cover;

  .login-left {
    background: rgba($color: #ffffff, $alpha: 0);
  }

  .login-content {
    box-shadow: 0px 16px 8px 0px #5f8ab4;
    width: 100%;
    height: 100%;

    display: block !important;
    min-width: 1150px;

    .login {
      border-radius: 6px;
      background: #ffffff;
      width: 328px;
      // height: 418px;
      height: 386px;
      margin-top: 15vh;
      margin-left: 65%;
      display: flex;
      flex-direction: column;

      align-items: center;
      position: relative;

      .title {
        position: absolute;
        top: 46px;

        font-weight: bold;
        font-size: 18px;
        color: #323232;
        line-height: 26px;
        text-align: right;
        font-style: normal;

        text-align: center;
        color: #323232;
      }

      .titleLine {
        position: absolute;
        top: 80px;
        width: 34px;
        height: 2px;
        background: #0078ff;
      }

      .division_line {
        z-index: 999;
        width: 1px;
        height: 15px;
        background-color: #999;
        position: absolute;
        left: 35px;
        top: 15px;
      }

      .loginForm {
        position: absolute;
        top: 115px;
      }
    }

    .logo {
      width: 245px;
      height: 60px;
      margin-top: 50px;
      margin-left: 50px;
    }

    .login-content-left {
      width: 100%;
      height: 100%;
      float: left;
      // background-image: url("../../assets/images/login_bg.png");
      background-size: 100% 100%;

      .company_name {
        padding: 20px 30px;

        img {
          width: 30px;
          height: 30px;
        }

        span {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 22px;
          color: #425d72;
          position: relative;
          top: -7px;
          left: 7px;
        }
      }

      .sys_description {
        margin-top: 40px;

        .customer_name {
          position: relative;
          text-align: center;
          overflow: hidden;
          height: 80px;

          .solid_word {
            font-family: Alibaba PuHuiTi;
            font-size: 62px;
            color: #ffffff;
            letter-spacing: 4px;
            font-weight: bold;
            position: absolute;
            width: 100%;
            z-index: 11;
            color: transparent;
            background: linear-gradient(180deg, #53abf3 0%, #0464e2 100%);
            -webkit-background-clip: text;
          }

          .hollow_word {
            font-family: Alibaba PuHuiTi;
            font-size: 62px;
            color: #ffffff;
            letter-spacing: 4px;
            font-weight: bold;
            position: absolute;
            width: 100%;
            left: 2px;
            top: 2px;
            z-index: 10;
            color: #fff;
            text-shadow: 0 0 0 rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882),
              0 0 2px rgba(5, 119, 230, 0.2882);
          }
        }
      }

      .sys_characteristic {
        text-align: center;
        font-family: FYZYT-;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        line-height: 10px;
        opacity: 0.82;
        margin-top: 20px;

        .spot {
          // padding: 0 15px;
          margin: 0 15px;
          display: inline-block;
          width: 4px;
          height: 4px;
          position: relative;
          top: -6px;
          background-color: #000000;
          border-radius: 4px;
        }
      }

      .sys_describe {
        text-align: center;
        font-family: "FYZYT-";
        font-weight: 400;
        font-size: 25px;
        color: #000000;
        line-height: 11px;
        margin-top: 30px;
        letter-spacing: 4px;
      }
    }

    .login-content-right {
      width: 30%;
      height: 100%;
      float: left;
      background-color: rgba(184, 216, 255, 0.5);
      padding: 42px 0;
      position: relative;

      .rk_login_logo {
        position: absolute;
        bottom: 14px;
        width: 100%;
        text-align: center;

        img {
          width: 90px;
        }
      }

      >>> .el-input__inner {
        height: 45px !important;
        padding-left: 45px !important;
      }

      .rk_logo {
        overflow: hidden;

        img {
          width: 158px;
          float: right;
          margin-right: 52px;
        }
      }

      .os_name {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 40px;
        color: #000000;
        line-height: 27px;
        text-align: center;
        margin-top: 80px;
      }

      .wel_come {
        font-family: "FYZYT-";
        font-weight: 400;
        font-size: 31px;
        color: #010101;
        margin-bottom: 50px;
        // line-height: 11px;
        // background: linear-gradient(
        //   0deg,
        //   rgba(3, 0, 0, 0.17) 0%,
        //   rgba(255, 255, 255, 0.17) 100%
        // );
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        // span {
        //   border-bottom: 2px solid #008cd6;
        // }
      }

      .el-form-item__content {
        text-align: center;
      }

      .el-form {
        text-align: center;
      }

      .el-input {
        // width: 80%;
        margin: auto;

        .el-input__inner {
          text-align: left;
        }
      }
    }
  }

  >>> .el-form-item__error {
    margin-left: 10% !important;
  }
}

.dia-txt {
  text-align: center;
  font-size: 20px;

  div:nth-child(2) {
    margin-top: 24px;
    font-size: 20px;
  }
}
</style>
